import React, { Component } from 'react'
import { connect } from 'react-redux'
import { originData, setData, Request, cloneDeep, formatSocketMsg, Type, EventCenter } from '@utils/Global'
import { API } from '@utils/config'
import { ReplayAction } from '@act'
const { updateNoAudio, updateFooter } = ReplayAction

class NoAudio extends Component {
  replayPromise(data) {
    const { info, token } = data
    const { id } = info
    return new Promise((resolve, reject) => {
      Request.SendRequest(API.REPLAY_DATA(id, token), 'GET', null, (res) => {
        if (res.status) {
          resolve({
            status: 1,
            data: res.data,
            msg: ''
          })
        } else {
          resolve({
            status: 0,
            data: null,
            msg: res.message || '获取,请重试'
          })
        }
      }, (err) => {
        resolve({
          status: 0,
          data: null,
          msg: '提交失败,请重试'
        })
      })
    })
  }
  async clickBtn() {
    const { dispatch } = this.props
    dispatch(updateNoAudio('loading', true))
    var rd = await this.replayPromise(originData['live'])
    if (rd.status && rd.data && rd.data.audio) {
      setData('replay', rd.data)
      dispatch(updateNoAudio('show', false))
      EventCenter.emit('get_replay_data_success', rd.data)
    } else {
      dispatch(updateNoAudio('loading', false))
    }
    console.log(rd)
  }
  renderInner() {
    const { loading } = this.props
    return loading ? (
      <div className="no_audio_loading">
        <img className="no_audio_loading_img" src={require('@images/default_loading.gif')} alt=""/>
      </div>
    ) :  (
      <div className="no_audio_inner">
        <div className="top">音频暂未合成，点击重试</div>
        <div className="bottom">
          <div onClick={this.clickBtn.bind(this)} className="bottom_btn">重试</div>
        </div>
      </div>
    )
  }
  render() {
    const { show } = this.props
    return(
      <div style={{display: show ? 'block' : 'none'}} className="no_audio">
        {this.renderInner()}
      </div>
    )
  }
}

const mapState = (state) => {
  return {
    show: state.ReplayState.noAudio.show,
    loading: state.ReplayState.noAudio.loading
  }
}

export default connect(mapState)(NoAudio)
